<script lang="ts">
import { defineComponent, reactive } from "vue";
import useSayhiSetup from "@/scripts/sayhi";
import { postCompanyedit } from "@/api/index";
import { injectState } from "@/scripts/usestateHello";
export default defineComponent({
  name: "HelloWorld",
  props: {
    msg: { type: String, required: true },
  },
  emits: ["update:msg"],
  setup: (props, { emit }) => {
    const { location, updateLocation } = injectState();
    const update = () => {
      postCompanyedit({ name: "liwan" }).then((res) => {
        console.log(res);
      });
    };
    const onSubmit = () => {
      console.log(JSON.parse(JSON.stringify(location)));
    };
    const data = useSayhiSetup(props);
    const oninput = (val: string) => {
      updateLocation("user", val);
    };
    const changeSel = (val: string) => {
      updateLocation("region", val);
    };
    return {
      ...data,
      update,
      onSubmit,
      location,
      changeSel,
      oninput,
    };
  },
});
</script>

<template>
  <h1>{{ msg }}</h1>
  <p>{{ location.user }}--{{ location.region }}</p>
  <el-button @click="updateAge">修改年龄</el-button>
  <el-button @click="updateName">修改姓名</el-button>
  <el-button @click="update">修改姓名</el-button>
  <h2>{{ data.name }}-{{ data.age }}</h2>

  <el-form :inline="true" :model="location" class="demo-form-inline">
    <el-form-item label="审批人">
      <el-input
        v-model="location.user"
        placeholder="审批人"
        @input="oninput"
      ></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select
        v-model="location.region"
        placeholder="活动区域"
        @change="changeSel"
      >
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped></style>
